<template>
  <view class="content">
    <view class="form">
      <!--<view class="item">-->
      <!--<image src="@/static/image/login_phone.png"/>-->
      <!--<input  v-model="param.j_username" placeholder-style="color:#B6BFC6" placeholder="请输入账号">-->
      <!--<image v-if="param.j_username" @click="clear('j_username')" src="@/static/image/input_delete.png"/>-->
      <!--</view>-->
      <view class="item">
        <image src="@/static/image/login_password.png" />
        <input
          type="text"
          password="true"
          placeholder-style="color:#B6BFC6"
          v-model="param.oldPassword"
          placeholder="请输入旧密码"
        />
        <image
          v-if="param.oldPassword"
          @click="clear('oldPassword')"
          src="@/static/image/input_delete.png"
        />
      </view>
      <view class="item">
        <image src="@/static/image/login_password.png" />
        <input
          type="text"
          password="true"
          placeholder-style="color:#B6BFC6"
          v-model="param.newPassword"
          placeholder="请输入新密码"
        />
        <image
          v-if="param.newPassword"
          @click="clear('newPassword')"
          src="@/static/image/input_delete.png"
        />
      </view>
      <view class="item">
        <image src="@/static/image/login_password.png" />
        <input
          type="text"
          password="true"
          placeholder-style="color:#B6BFC6"
          v-model="newPassword"
          placeholder="请确认新密码"
        />
        <image
          v-if="newPassword"
          @click="newPassword = ''"
          src="@/static/image/input_delete.png"
        />
      </view>
      <view
        class="Btn"
        :style="{
          background: check(false)
            ? 'rgba(74, 125, 221,1)'
            : 'rgba(74, 125, 221,0.37)',
        }"
        @click="submit"
        >提交</view
      >
    </view>
  </view>
</template>

<script>
import API from "@/common/api.js";
export default {
  data() {
    return {
      param: {
        ajax: 1,
        oldPassword: "",
        newPassword: "",
        id: "",
        token: uni.getStorageSync("token"),
      },
      newPassword: "",
    };
  },
  onLoad(options) {},
  methods: {
    submit() {
      if (!this.check(true)) {
        return;
      }
      uni.showLoading({
        mask: true,
      });
      API.changePwd(this.param).then((res) => {
        if (res.resCode == "success") {
          uni.showToast({
            title: "修改成功",
            icon: "success",
            duration: 2000,
            mask: true,
          });
          setTimeout(() => {
            uni.navigateBack({
              //返回
              delta: 1,
            });
          }, 2000);
        }
      });
    },
    check(flag) {
      let msg = "";
      if (!this.param.oldPassword) {
        msg = "请输入旧密码";
      } else if (!this.param.newPassword) {
        msg = "请输入新密码";
      } else if (this.newPassword != this.param.newPassword) {
        msg = "两次输入的新密码不一致";
      }
      if (msg) {
        if (flag) {
          uni.showToast({
            title: msg,
            icon: "none",
            duration: 2000,
          });
        }
        return false;
      } else {
        return true;
      }
    },
    clear(key) {
      this.param[key] = "";
    },
    change() {
      this.flag = !this.flag;
    },
    goUrl(url) {
      uni.navigateTo({
        url: "./" + url,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 40rpx;
  height: calc(100vh - 80rpx);
  background: white;
  image {
    width: 200rpx;
    height: 200rpx;
  }
  .title {
    font-size: 40rpx;
    font-weight: 500;
    color: #525c60;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .form {
    margin-top: 20px;
    font-size: 31rpx;
    .item {
      display: flex;
      border-bottom: 1px solid #eef1f1;
      image {
        width: 32rpx;
        height: 32rpx;
        display: block;
        margin-top: 46rpx;
      }
      input {
        width: calc(100% - 104rpx);
        color: #525c60;
        padding: 40rpx 0;
        font-size: 30rpx;
        margin: 0 20rpx;
      }
      text {
        width: 222rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(143, 188, 197, 1);
        line-height: 124rpx;
        margin-left: 20rpx;
        text-align: right;
      }
    }

    .Btn {
      margin-top: 100rpx;
      font-size: 30rpx;
      width: 100%;
      line-height: 90rpx;
      color: white;
      background-color: rgb(234, 234, 234);
      border: none;
      outline: none;
      border-radius: 50rpx;
      text-align: center;
    }
  }
  .rember {
    display: flex;
    justify-content: space-between;
    line-height: 160rpx;
    text:first-child {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(232, 49, 18, 0.5);
    }
    text:last-child {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(82, 92, 96, 1);
    }
  }
  .footer {
    font-size: 11px;
    position: absolute;
    bottom: 50px;
    display: flex;
    justify-content: center;
    width: 90%;
    p {
      color: rgb(131, 131, 131);
      text {
        text-decoration: underline;
        margin-left: 5px;
      }
    }
  }
}
</style>
